import React, { useEffect, useRef } from 'react'
import Top from "../../../components/top"
import "./index.css"
import UserinfoUpdate from "./userinfo_update"
import UserinfoUpdate2 from "./userinfo_update/userinfo_update2"
import { getUserInfo, editUser } from '../../../api/userinfo'
import Aretl from './aretl/index.jsx'
const User = (props) => {
  const [Userinfo, setInfo] = React.useState("getUserInfo")
  const input = useRef(null)
  const getUser = async()=>{
    let res = await getUserInfo({ phone: '18234824645' })
    setInfo(res)
  }
  useEffect(() => {
    getUser()
  }, [])
  const edit =async (namer) => {
    const uid =  Userinfo[0].uid
    let res = await editUser({ user: namer, uid:uid })
    console.log(res);
  }
  return (
    <div>
      <div className='topName top_box'>
        <Top title="个人资料"></Top>
        {/* <Huantouxiang></Huantouxiang> */}

        <div className='userinfo_img'>
          <p className='userinfo_p1'>MR.COOL</p>
          {/* <img src="/img/home/加载.png" alt="" /> */}
          <Aretl></Aretl>
          
        </div>
        <div className='userinfo_update'>
          <UserinfoUpdate title="昵称" userName={Userinfo[0].name} title2={<label><input ref={input} id='input1111' className='input1111' type={"text"} placeholder={Userinfo[0].name} /></label>} />
          <UserinfoUpdate title="手机号" title2={<span>{Userinfo[0].phone}</span>} />
          <div className='usUpd'>
            <UserinfoUpdate2 UserInfoDate={Userinfo[0].birthday} ></UserinfoUpdate2>
          </div>
          <UserinfoUpdate title="性别"
            title2={<label>
              <input type={"radio"} name={'sex'} value='男' checked="checked" onChange={() => { }} />
              男
            </label>}
            title3={<label>
              <input type={"radio"} name={'sex'} value='女' />
              女
            </label>}
          />
        </div>
      </div>

      <div className='user_button'>
        <button onClick={() => {
          edit(input.current.value)
        }}>保存信息</button>
      </div>
    </div>
  )
}

export default (User)




